<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            background-color: #f00;
            object-fit: scale-down;
            object-position: 10px 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <img src="./image/3.jpg" alt="">

    <!-- 
		 背景图片
			background-image: url(./image/2.png);
			背景图片不平铺
			background-repeat: no-repeat;
			背景图片的大小
			background-size:width  height ;  
				cover 放大图片撑满盒子 图片有可能不会完整显示 
				contain 放大图片尽可能撑满盒子  图片完整显示
			背景图片定位
			background-position : x y;    
				x轴三个特殊位置可以用单词 代替    x ->  left  right  center
				y轴三个特殊位置可以用单词 代替    y ->  top  bottom  center
			背景图片基点
			background-origin: ; padding-box(默认)  content-box  border-box
			背景图片裁剪 
			background-clip: ; padding-box  content-box  border-box(默认)
		图片属性 
			object-fit
				fill 默认值  图片默认填满 内容区域
				contain  保持图片原始比例 放大图片 图片完整显示
				cover  保持图片原始比例 放大图片 图片铺满内容区域
				none 保持图片原始比例  保持图片原始宽高
				scale-down  保持图片原始比例 选取  contain  none 里面图片较小的值
			object-position:x y;
				x轴三个特殊位置可以用单词 代替    x ->  left  right  center
				y轴三个特殊位置可以用单词 代替    y ->  top  bottom  center
			
			
			http://image.hnclove.com/hnclove/men.jpg
			http://image.hnclove.com/hnclove/bg.png
		 -->
</body>

</html>